<template>
  <div class="user-manage-page">
    <PageHeader title="用户管理" backPath="/dawn/dashboard/root"></PageHeader>

    <!-- 功能卡片列表 -->
    <div class="card-list">
      <div 
        v-for="(item, index) in menuList" 
        :key="index" 
        class="function-item" 
        @click="item.action"
      >
        <span class="function-item-icon">
          <van-icon :name="item.icon" />
        </span>
        <span class="function-item-text">{{ item.title }}</span>
        <span class="function-item-arrow">
          <van-icon name="arrow" />
        </span>
      </div>
    </div>

    <!-- 用户操作区（搜索） -->
    <div class="user-form-card">
      <van-field v-model="search" placeholder="请输入用户名/手机号搜索" left-icon="search" />
      <van-button type="primary" block style="margin-top: 16px;" @click="handleSearch">搜索</van-button>
      
      <!-- 状态筛选 -->
      <div class="status-filter">
        <div class="filter-title">状态筛选:</div>
        <div class="filter-options">
          <van-tag 
            :color="statusFilter === -1 ? '#1989fa' : '#f2f3f5'" 
            :text-color="statusFilter === -1 ? '#fff' : '#666'"
            @click="setStatusFilter(-1)"
            class="filter-tag"
          >
            全部
          </van-tag>
          <van-tag 
            :color="statusFilter === 0 ? '#1989fa' : '#f2f3f5'" 
            :text-color="statusFilter === 0 ? '#fff' : '#666'"
            @click="setStatusFilter(0)"
            class="filter-tag"
          >
            正常
          </van-tag>
          <van-tag 
            :color="statusFilter === 1 ? '#1989fa' : '#f2f3f5'" 
            :text-color="statusFilter === 1 ? '#fff' : '#666'"
            @click="setStatusFilter(1)"
            class="filter-tag"
          >
            禁用
          </van-tag>
        </div>
      </div>
    </div>

    <!-- 用户列表和批量操作 -->
    <div class="list-actions">
      <div class="select-all">
        <van-checkbox v-model="isAllSelected" @click="toggleSelectAll">全选</van-checkbox>
        <span class="selected-count" v-if="selectedUsers.length > 0">
          已选择 {{ selectedUsers.length }} 项
        </span>
      </div>
      <div class="action-buttons">
        <van-button 
          type="success" 
          size="small" 
          :disabled="selectedUsers.length === 0"
          @click="confirmBatchActivate"
        >
          激活选中
        </van-button>
        <van-button 
          type="warning" 
          size="small" 
          :disabled="selectedUsers.length === 0"
          @click="confirmBatchDeactivate"
        >
          禁用选中
        </van-button>
        <van-button 
          type="danger" 
          size="small" 
          :disabled="selectedUsers.length === 0"
          @click="confirmDelete"
        >
          删除选中
        </van-button>
      </div>
    </div>

    <div class="user-list-title">用户列表</div>
    <div class="user-list">
      <!-- 加载状态 -->
      <div class="loading-container" v-if="loading">
        <van-loading type="spinner" color="#1989fa" />
        <span class="loading-text">加载中...</span>
      </div>

      <!-- 错误提示 -->
      <div class="error-container" v-else-if="error">
        <van-icon name="warning-o" class="error-icon" />
        <span class="error-text">{{ error }}</span>
        <van-button size="small" @click="fetchUserList" class="retry-button">重试</van-button>
      </div>

      <!-- 空状态 -->
      <div class="empty-container" v-else-if="userList.length === 0">
        <van-icon name="info-o" class="empty-icon" />
        <span class="empty-text">暂无用户数据</span>
      </div>

      <!-- 用户列表 -->
      <div class="user-item" v-else v-for="(user, index) in userList" :key="user.id">
        <div class="user-item-checkbox">
          <van-checkbox v-model="user.selected" @click.stop />
        </div>
        <div class="user-item-content">
          <div class="user-item-info">
            <div class="user-item-header">
              <span class="user-item-number">{{ (currentPage - 1) * pageSize + index + 1 }}</span>
              <span class="user-item-name">{{ user.name }}</span>
              <span class="user-item-status" :class="{
                'status-admin': user.isAdmin,
                'status-active': !user.isAdmin && user.status === 0,
                'status-inactive': !user.isAdmin && user.status === 1,
                'status-deleted': !user.isAdmin && user.status === 3
              }">
                {{ user.role }}
              </span>
              <span v-if="!user.zhjy" class="user-item-no-bind">
                <van-tag type="warning">未绑定</van-tag>
              </span>
            </div>
            
            <!-- 基本信息 -->
            <div class="user-item-info-list">
              <div class="info-item">
                <van-icon name="clock" class="info-icon" />
                <span class="info-label">创建时间:</span>
                <span class="info-value">{{ user.createTime }}</span>
              </div>
              <div class="info-item">
                <van-icon name="sign" class="info-icon" />
                <span class="info-label">最后登录:</span>
                <span class="info-value">{{ user.lastLoginTime }}</span>
              </div>
              
              <!-- 智慧平台信息部分 -->
              <template v-if="user.zhjy">
                <div class="zhjy-section">智慧平台信息</div>
                <div class="info-item zhjy-item">
                  <van-icon name="contact" class="info-icon" />
                  <span class="info-label">姓名:</span>
                  <span class="info-value">{{ user.zhjy.realName }}</span>
                </div>
                <div class="info-item zhjy-item">
                  <van-icon name="card" class="info-icon" />
                  <span class="info-label">学号:</span>
                  <span class="info-value">{{ user.zhjy.studentId }}</span>
                </div>
                <div class="info-item zhjy-item">
                  <van-icon name="friends" class="info-icon" />
                  <span class="info-label">身份:</span>
                  <span class="info-value">{{ user.zhjy.entity }}</span>
                </div>
                <div class="info-item zhjy-item">
                  <van-icon name="cluster" class="info-icon" />
                  <span class="info-label">班级:</span>
                  <span class="info-value">{{ user.zhjy.department }}</span>
                </div>
              </template>
            </div>
          </div>
          <div class="user-item-actions">
            <van-button size="small" type="primary" @click.stop="editUser(user)" plain>编辑</van-button>
            <template v-if="!user.isAdmin">
              <template v-if="user.status === 3">
                <!-- 已删除的用户不显示恢复按钮 -->
              </template>
              <template v-else>
                <van-button v-if="user.status === 0" size="small" type="warning" @click.stop="confirmToggleStatus(user, 1)" plain>禁用</van-button>
                <van-button v-if="user.status === 1" size="small" type="success" @click.stop="confirmToggleStatus(user, 0)" plain>激活</van-button>
              </template>
            </template>
            <van-button size="small" type="danger" @click.stop="confirmDeleteSingle(user)" plain>删除</van-button>
          </div>
        </div>
      </div>
      
      <!-- 分页组件 -->
      <div class="pagination-wrapper" v-if="userList.length > 0">
        <Pagination 
          :current-page="currentPage" 
          :total-pages="totalPages" 
          :total="total"
          @page-change="handlePageChange" 
        />
      </div>
    </div>
    
    <!-- 添加用户弹窗 -->
    <van-popup
      v-model:show="showAddUserPopup"
      closeable
      round
      position="bottom"
      :style="{ height: '90%' }"
    >
      <div class="popup-content">
        <RegisterComponent @register-success="handleRegisterSuccess" />
      </div>
    </van-popup>

    <!-- 删除确认对话框 -->
    <van-dialog
      v-model:show="showDeleteDialog"
      title="删除确认"
      confirm-button-text="确认删除"
      show-cancel-button
      @confirm="deleteSelectedUsers"
    >
      <div class="dialog-content">
        <p>确定要删除选中的 <span class="highlight">{{ selectedUsers.length }}</span> 个用户吗？</p>
        <p class="warning">此操作不可撤销！</p>
      </div>
    </van-dialog>

    <!-- 单个用户删除确认对话框 -->
    <van-dialog
      v-model:show="showSingleDeleteDialog"
      title="删除确认"
      confirm-button-text="确认删除"
      show-cancel-button
      @confirm="deleteSingleUser"
    >
      <div class="dialog-content">
        <p>确定要删除用户 <span class="highlight">{{ userToDelete?.name }}</span> 吗？</p>
        <p class="warning">此操作不可撤销！</p>
      </div>
    </van-dialog>

    <!-- 状态更改确认对话框 -->
    <van-dialog
      v-model:show="showStatusDialog"
      :title="targetStatus === 0 ? '激活确认' : '禁用确认'"
      :confirm-button-text="targetStatus === 0 ? '确认激活' : '确认禁用'"
      show-cancel-button
      @confirm="toggleUserStatus"
    >
      <div class="dialog-content">
        <p>确定要{{ targetStatus === 0 ? '激活' : '禁用' }}用户 <span class="highlight">{{ userToToggle?.name }}</span> 吗？</p>
        <p v-if="targetStatus === 1" class="warning">禁用后用户将无法登录系统！</p>
      </div>
    </van-dialog>

    <!-- 编辑用户弹窗 -->
    <van-popup
      v-model:show="showEditPopup"
      closeable
      round
      position="bottom"
      :style="{ height: '60%' }"
    >
      <div class="edit-popup-content">
        <div class="edit-popup-header">
          <h3>编辑用户信息</h3>
        </div>
        <div class="edit-form">
          <van-field
            v-model="editForm.username"
            label="用户名"
            placeholder="请输入用户名"
            :error="!!editFormErrors.username"
            :error-message="editFormErrors.username"
          />
          
          <van-field
            v-model="editForm.password"
            label="新密码"
            placeholder="不修改请留空"
            type="password"
            :error="!!editFormErrors.password"
            :error-message="editFormErrors.password"
          />
          
          <van-field
            v-model="editForm.confirmPassword"
            label="确认密码"
            placeholder="不修改请留空"
            type="password"
            :error="!!editFormErrors.confirmPassword"
            :error-message="editFormErrors.confirmPassword"
          />
          
          <div class="edit-form-actions">
            <van-button type="primary" block @click="submitEditForm">保存修改</van-button>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 批量操作确认对话框 -->
    <van-dialog
      v-model:show="showBatchActionDialog"
      :title="batchActionTitle"
      :confirm-button-text="batchActionConfirmText"
      show-cancel-button
      @confirm="executeBatchAction"
    >
      <div class="dialog-content">
        <p>确定要{{ batchActionDesc }}选中的 <span class="highlight">{{ selectedUsers.length }}</span> 个用户吗？</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { router } from '@inertiajs/vue3'
import axios from 'axios'
import PageHeader from '@/Pages/compontents/PageHeader.vue'
import RegisterComponent from '@/Pages/login/Register.vue'
import Pagination from '@/Pages/compontents/Pagination.vue'
import request from '@/utils/request';
import apiUrls  from '@/config/apiUrls'; 
import { 
  showToast, 
  showConfirmDialog, 
  Checkbox as VanCheckbox, 
  CheckboxGroup as VanCheckboxGroup,
  Icon as VanIcon, 
  Field as VanField, 
  Button as VanButton,
  Popup as VanPopup,
  Dialog as VanDialog,
  Loading as VanLoading,
  Tag as VanTag
} from 'vant'
import { data } from 'autoprefixer'

// 使用script setup时不需要注册组件，因为Vant组件已经是全局注册的
// 如果多选框仍然不显示，可能需要检查Vant库是否正确安装和初始化

const search = ref('')
const showDeleteDialog = ref(false)
const showSingleDeleteDialog = ref(false)

// 初始化用户列表，为一个空数组，将从API获取数据
const userList = ref([])
const loading = ref(false)
const error = ref(null)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(0)
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))

// 在script部分添加状态筛选相关变量
const statusFilter = ref(-1)  // -1表示全部，0表示正常，1表示禁用，3表示已删除

// 从服务器获取用户列表
const fetchUserList = async () => {
  loading.value = true
  error.value = null
  
  try {
    // 构建请求参数
    const params = {
      page: currentPage.value,
      limit: pageSize.value
    }
    
    // 如果有搜索关键字，添加到参数中
    if (search.value.trim()) {
      params.keyword = search.value.trim()
    }
    
    // 如果有状态筛选，添加到参数中
    if (statusFilter.value !== -1) {
      params.status = statusFilter.value
    }
    
    // 实际API请求，添加分页参数和筛选参数
    const response = await request.get(apiUrls.root.getAllUserDetails, { params })
    
    // 处理API返回的数据
    if (response.code === 200 && response.data) {
      // 设置总数，用于分页 - 从新的数据结构中获取
      total.value = response.data.total || 0
      
      // 将API返回的数据转换为组件需要的格式 - 从data.list中获取用户数据
      userList.value = response.data.list.map(user => {
        // 根据ID为1判断是否为管理员账号
        const isAdmin = user.dawn_id === 1;
        
        // 处理用户状态：0是正常用户，1是禁用，3是删除
        let roleText = '未知状态';
        if (isAdmin) {
          roleText = '管理员';
        } else {
          switch (user.dawn_Status) {
            case 0:
              roleText = '正常用户';
              break;
            case 1:
              roleText = '禁用用户';
              break;
            case 3:
              roleText = '已删除';
              break;
            default:
              roleText = '未知状态';
          }
        }
        
        return {
          id: user.dawn_id,
          name: user.dawn_name,
          role: roleText,
          status: user.dawn_Status,
          isAdmin: isAdmin,
          createTime: user.dawn_createTime,
          lastLoginTime: user.dawn_lastTime,
          selected: false,
          // 添加智慧教育账户信息
          zhjy: user.zhjy_user ? {
            username: user.zhjy_user.dawn_zhjyUser,
            realName: user.zhjy_user.dawn_zhjyIdName,
            idCard: user.zhjy_user.dawn_zhjyIdCar,
            studentId: user.zhjy_user.dawn_zhjyIStudentId,
            entity: user.zhjy_user.dawn_zhjyidEntity,
            department: user.zhjy_user.dawn_zhjyDeptName,
            status: user.zhjy_user.dawn_zhjyStatus === 0 ? '正常' : '未通过校验'
          } : null
        };
      });
    } else {
      throw new Error('获取用户列表失败: ' + (response.message || '未知错误'));
    }
  } catch (err) {
    console.error('获取用户列表失败:', err)
    error.value = '获取用户列表失败，请重试'
    showToast('获取用户列表失败，请重试')
  } finally {
    loading.value = false
  }
}

// 处理页码变化
const handlePageChange = (page) => {
  currentPage.value = page
  fetchUserList()
}

// 在组件挂载时获取用户数据
onMounted(() => {
  fetchUserList()
})

// 添加用户弹窗控制
const showAddUserPopup = ref(false)

// 计算已选择的用户
const selectedUsers = computed(() => {
  return userList.value.filter(user => user.selected)
})

// 计算是否全选
const isAllSelected = computed({
  get: () => {
    return userList.value.length > 0 && selectedUsers.value.length === userList.value.length
  },
  set: (value) => {
    // 这个setter是为了支持v-model双向绑定
  }
})

// 全选/取消全选
const toggleSelectAll = () => {
  const newValue = !isAllSelected.value
  userList.value.forEach(user => {
    user.selected = newValue
  })
}

const menuList = [
  {
    title: '添加用户',
    icon: 'plus',
    action: () => {
      // 打开添加用户弹窗
      showAddUserPopup.value = true
    }
  },
//   {
//     title: '批量导入',
//     icon: 'apps-o',
//     action: () => {
//       // 跳转到批量导入页面或弹窗
//       console.log('批量导入');
//     }
//   }
]

// 注册成功的回调
const handleRegisterSuccess = () => {
  showAddUserPopup.value = false
  showToast('添加用户成功')
  // 刷新用户列表
  fetchUserList()
}

// 显示删除确认对话框
const confirmDelete = () => {
  if (selectedUsers.value.length > 0) {
    showDeleteDialog.value = true
  } else {
    showToast('请先选择要删除的用户')
  }
}

// 删除选中的用户
const deleteSelectedUsers = async () => {
  try {
    const selectedIds = selectedUsers.value.map(user => user.id)
    
    // 调用API删除用户，使用状态码3表示删除
    const response = await request.delete(`${apiUrls.root.deleteUserDetails}/3`, {
      data: { ids: selectedIds }
    })
    
    // 删除后刷新列表
    fetchUserList()
    
    // 显示服务器返回的成功信息
    showToast(response.message || `成功删除 ${selectedIds.length} 个用户`)
  } catch (err) {
    console.error('删除用户失败:', err)
    showToast(err.response?.data?.message || '删除用户失败，请重试')
  } finally {
    // 关闭对话框
    showDeleteDialog.value = false
  }
}

const editUser = (user) => {
  // 保存当前编辑的用户
  userToEdit.value = user
  
  // 将用户数据回显到表单
  editForm.value.username = user.name
  editForm.value.password = ''
  editForm.value.confirmPassword = ''
  
  // 清空表单错误
  editFormErrors.value = {
    username: '',
    password: '',
    confirmPassword: '',
  }
  
  // 显示编辑弹窗
  showEditPopup.value = true
}

const userToDelete = ref(null)

const confirmDeleteSingle = (user) => {
  userToDelete.value = user
  showSingleDeleteDialog.value = true
}

const deleteSingleUser = async () => {
  try {
    // 发送删除请求
    const response = await request.delete(`${apiUrls.root.deleteUserDetails}/3`, {
      data: {
        ids: [userToDelete.value.id]
      }
    })
    
    // 删除后刷新列表
    fetchUserList()
    
    // 显示服务器返回的成功信息
    showToast(response.message || `已成功删除用户 ${userToDelete.value.name}`)
    
  } catch (error) {
    console.error('删除用户失败:', error)
    showToast(error.response?.data?.message || '删除用户失败，请重试')
  } finally {
    userToDelete.value = null
    showSingleDeleteDialog.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  currentPage.value = 1 // 重置页码
  fetchUserList()
}

// 在script setup部分添加切换用户状态的功能
const showStatusDialog = ref(false)
const userToToggle = ref(null)
const targetStatus = ref(null)

const confirmToggleStatus = (user, status) => {
  userToToggle.value = user
  targetStatus.value = status
  showStatusDialog.value = true
}

const toggleUserStatus = async () => {
  try {
    const newStatus = targetStatus.value
    
    // 调用API更改用户状态
    const response = await request.delete(`${apiUrls.root.deleteUserDetails}/${newStatus}`, {
      data: {
        ids: [userToToggle.value.id]
      }
    })
    
    // 刷新数据
    fetchUserList()
    
    // 显示服务器返回的成功信息
    showToast(response.message || `成功${targetStatus.value === 0 ? '激活' : '禁用'}用户 ${userToToggle.value.name}`)
  } catch (err) {
    console.error('更改用户状态失败:', err)
    showToast(err.response?.data?.message || '更改用户状态失败，请重试')
  } finally {
    // 重置状态
    userToToggle.value = null
    targetStatus.value = null
    showStatusDialog.value = false
  }
}

// 添加编辑用户相关的代码
const showEditPopup = ref(false)
const userToEdit = ref(null)
const editForm = ref({
  username: '',
  password: '',
  confirmPassword: '',
})
const editFormErrors = ref({
  username: '',
  password: '',
  confirmPassword: '',
})

const validateEditForm = () => {
  let isValid = true
  const errors = {
    username: '',
    password: '',
    confirmPassword: '',
  }
  
  // 验证用户名
  if (!editForm.value.username.trim()) {
    errors.username = '用户名不能为空'
    isValid = false
  }
  
  // 验证密码（如果已输入）
  if (editForm.value.password) {
    if (editForm.value.password.length < 6) {
      errors.password = '密码长度不能少于6位'
      isValid = false
    }
    
    // 验证确认密码
    if (editForm.value.password !== editForm.value.confirmPassword) {
      errors.confirmPassword = '两次输入的密码不一致'
      isValid = false
    }
  } else if (editForm.value.confirmPassword) {
    // 如果只填了确认密码没填新密码
    errors.password = '请输入新密码'
    isValid = false
  }
  
  editFormErrors.value = errors
  return isValid
}

const submitEditForm = async () => {
  // 表单验证
  if (!validateEditForm()) {
    return
  }
  
  try {
    // 准备提交的数据
    const formData = {
      id: userToEdit.value.id,
      username: editForm.value.username,
    }
    
    // 如果输入了密码，则添加到请求数据
    if (editForm.value.password) {
      formData.password = editForm.value.password
    }
    
    // 发送编辑请求 - 使用PUT方法
    const response = await request.post(apiUrls.root.updateUserDetails, formData)
    
    // 刷新列表
    fetchUserList()
    
    // 显示成功信息
    showToast(response.message || '用户信息修改成功')
    
    // 关闭弹窗
    showEditPopup.value = false
  } catch (error) {
    console.error('编辑用户失败:', error)
    showToast(error.response?.data?.message || '编辑用户失败，请重试')
  }
}

// 批量操作相关变量
const showBatchActionDialog = ref(false)
const batchActionTitle = ref('')
const batchActionDesc = ref('')
const batchActionConfirmText = ref('')
const batchActionStatus = ref(null)

// 批量激活
const confirmBatchActivate = () => {
  if (selectedUsers.value.length === 0) {
    showToast('请先选择要激活的用户')
    return
  }
  
  batchActionTitle.value = '激活确认'
  batchActionDesc.value = '激活'
  batchActionConfirmText.value = '确认激活'
  batchActionStatus.value = 0  // 0表示正常状态
  showBatchActionDialog.value = true
}

// 批量禁用
const confirmBatchDeactivate = () => {
  if (selectedUsers.value.length === 0) {
    showToast('请先选择要禁用的用户')
    return
  }
  
  batchActionTitle.value = '禁用确认'
  batchActionDesc.value = '禁用'
  batchActionConfirmText.value = '确认禁用'
  batchActionStatus.value = 1  // 1表示禁用状态
  showBatchActionDialog.value = true
}

// 执行批量操作
const executeBatchAction = async () => {
  try {
    const selectedIds = selectedUsers.value.map(user => user.id)
    
    // 调用API更改用户状态
    const response = await request.delete(`${apiUrls.root.deleteUserDetails}/${batchActionStatus.value}`, {
      data: { ids: selectedIds }
    })
    
    // 刷新列表
    fetchUserList()
    
    // 显示服务器返回的成功信息
    showToast(response.message || `成功${batchActionDesc.value}选中用户`)
  } catch (err) {
    console.error('批量操作失败:', err)
    showToast(err.response?.data?.message || '操作失败，请重试')
  } finally {
    showBatchActionDialog.value = false
  }
}

// 设置状态筛选
const setStatusFilter = (status) => {
  statusFilter.value = status
  currentPage.value = 1  // 重置页码
  fetchUserList()
}
</script>

<style scoped>
.user-manage-page {
  max-width: 500px;
  margin: 0 auto;
  padding: 24px 0 40px 0;
  background: #f7f8fa;
  min-height: 100vh;
}

.card-list {
  margin: 0 16px 24px 16px;
}

.function-item {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  cursor: pointer;
}

.function-item:active {
  background: #f8f8f8;
}

.function-item-icon {
  font-size: 22px;
  margin-right: 12px;
  color: #666;
}

.function-item-text {
  flex: 1;
  font-size: 16px;
  color: #333;
}

.function-item-arrow {
  color: #ccc;
}

.user-form-card {
  background: #fff;
  border-radius: 12px;
  margin: 0 16px 24px 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.list-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 16px 12px 16px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.select-all {
  display: flex;
  align-items: center;
}

.selected-count {
  margin-left: 8px;
  font-size: 14px;
  color: #666;
}

.user-list-title {
  margin: 0 16px 8px 16px;
  color: #1e9fff;
  font-weight: 600;
  font-size: 16px;
}

.user-list {
  margin: 0 16px;
}

/* 用户列表项样式 - 改进移动端布局 */
.user-item {
  display: flex;
  align-items: flex-start;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.user-item-checkbox {
  margin-right: 12px;
  padding-top: 3px;
}

.user-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.user-item-info {
  flex: 1;
  padding-right: 0;
  margin-bottom: 12px;
}

.user-item-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.user-item-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background-color: #f2f3f5;
  border-radius: 10px;
  font-size: 12px;
  color: #666;
  margin-right: 8px;
}

.user-item-name {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.user-item-status {
  background-color: #f2f5fa;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 8px;
  font-size: 12px;
}

.user-item-details {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.user-item-detail {
  margin-right: 15px;
}

.user-item-detail .detail-label {
  font-size: 12px;
  color: #666;
}

.user-item-detail .detail-value {
  font-size: 14px;
  color: #333;
}

.user-item-actions {
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
  border-top: 1px solid #f1f1f1;
  padding-top: 10px;
}

.user-item-actions .van-button {
  margin-right: 5px;
}

.user-item-actions .van-button:first-child {
  margin-left: 0;
}

.popup-content {
  height: 100%;
  overflow-y: auto;
  padding: 20px 16px;
}

.delete-confirm-content {
  padding: 20px;
  text-align: center;
  color: #666;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
}

.loading-text {
  margin-left: 12px;
  font-size: 14px;
  color: #1989fa;
}

.error-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
}

.error-icon {
  margin-right: 12px;
  font-size: 20px;
  color: #f56c6c;
}

.error-text {
  font-size: 14px;
  color: #666;
}

.retry-button {
  margin-left: 12px;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 20px;
}

.empty-icon {
  margin-right: 12px;
  font-size: 20px;
  color: #909399;
}

.empty-text {
  font-size: 14px;
  color: #666;
}

/* 适配小屏幕手机 */
@media screen and (max-width: 370px) {
  .user-item {
    padding: 12px;
  }
  
  .user-item-checkbox {
    margin-right: 8px;
  }
  
  .function-item {
    padding: 14px 16px;
  }
  
  .user-form-card {
    padding: 12px;
  }
  
  .user-item-status {
    font-size: 11px;
    padding: 1px 6px;
  }
  
  .user-item-name {
    font-size: 15px;
  }
  
  .user-item-details {
    font-size: 12px;
  }
}

.pagination-wrapper {
  margin-top: 20px;
  background: #fff;
  border-radius: 12px;
  padding: 8px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.user-item-zhjy {
  display: flex;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.user-item-zhjy .user-item-detail {
  margin-right: 15px;
}

.user-item-no-zhjy {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.user-item-no-zhjy .van-tag {
  font-size: 12px;
  padding: 2px 8px;
}

.user-item-no-bind {
  margin-left: 8px;
}

.user-item-no-bind .van-tag {
  font-size: 12px;
  padding: 0 6px;
  height: 20px;
  line-height: 20px;
}

.user-item-details {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.user-item-zhjy {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
  display: flex;
}

.user-item-col {
  flex: 1;
  min-width: 0;
}

.user-item-detail {
  margin-bottom: 5px;
  display: flex;
}

.user-item-detail .detail-label {
  font-size: 12px;
  color: #666;
  min-width: 70px;
}

.user-item-detail .detail-value {
  font-size: 13px;
  color: #333;
  flex: 1;
  word-break: break-all;
}

.status-active {
  background-color: #e8f5e9;
  color: #4caf50;
}

.status-inactive {
  background-color: #ffebee;
  color: #f44336;
}

.status-deleted {
  background-color: #eeeeee;
  color: #9e9e9e;
}

.status-admin {
  background-color: #e3f2fd;
  color: #1976d2;
  font-weight: bold;
}

.user-item-info-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
}

.zhjy-section {
  font-size: 13px;
  color: #1989fa;
  font-weight: 500;
  margin-top: 8px;
  padding-left: 4px;
  border-left: 2px solid #1989fa;
}

.zhjy-item {
  margin-left: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  padding: 3px 0;
}

.info-icon {
  color: #8a8a8a;
  margin-right: 4px;
  font-size: 14px;
}

.info-label {
  font-size: 12px;
  color: #666;
  margin-right: 5px;
  min-width: 60px;
  white-space: nowrap;
}

.info-value {
  font-size: 13px;
  color: #333;
  flex: 1;
}

/* 对话框样式 */
.dialog-content {
  padding: 10px 15px;
  text-align: center;
}

.dialog-content .highlight {
  font-weight: bold;
  color: #ff7500;
}

.dialog-content .warning {
  margin-top: 10px;
  color: #ff4d4f;
  font-size: 14px;
}

/* 编辑弹窗样式 */
.edit-popup-content {
  padding: 20px;
}

.edit-popup-header {
  margin-bottom: 24px;
  text-align: center;
}

.edit-popup-header h3 {
  font-size: 18px;
  color: #333;
  margin: 0;
}

.edit-form {
  margin-bottom: 16px;
}

.edit-form-actions {
  margin-top: 24px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-buttons .van-button {
  font-size: 12px;
}

/* 状态筛选样式 */
.status-filter {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed #eee;
}

.filter-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.filter-tag {
  padding: 6px 12px;
  cursor: pointer;
}

.filter-tag:active {
  opacity: 0.8;
}
</style>